import { useEffect } from 'react';
import styles from './index.less';
import { formatDate } from '../../utils/index';
import { Empty, Divider, BackTop } from 'antd';
import { EyeOutlined, ShareAltOutlined } from '@ant-design/icons';
import { KnowledgeModelState, useDispatch, useSelector, history } from 'umi';
import Upperright from '@/components/rightcomp/upperright/upperright'
import Rightlowerother from "@/components/rightcomp/rightlowerother/rightlowerother"
// 知识小册
export default function knowledgeLeft() {

    const { knowledgs } = useSelector(
        (state: { knowledge: KnowledgeModelState }) => state.knowledge,
    );
    // console.log(knowledgs,"11111111111111111111111111111111");
    
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch({
            type: 'knowledge/getKnowLedgeList',
        });
    }, []);

    return (
        <div className="container">
            <div className={styles.lefta}>
                {knowledgs && knowledgs.length > 0 ? (
                    knowledgs.map((item) => {
                        return (
                            <div
                                key={item.id}
                                className={styles.Lefta_Hover}
                                onClick={() => {
                                    history.push(`/knowledge/${item.id}`);
                                }}
                            >
                                <BackTop />
                                <div className={styles.lefta_header}>
                                    <div className={styles.lefta_Header_Top}>{item.title}</div>
                                    <div className={styles.lefta_Header_Right}>
                                        <div className={styles.lefta_Header_H}></div>
                                        <span className={styles.lefta_Header_Time}>
                                            {formatDate(item.updateAt)}
                                        </span>
                                    </div>
                                </div>
                                <div className={styles.lefts_main}>
                                    <div className={styles.lefta_Main_Left}>

                                        <div className={styles.lefta_Right}>
                                            <img src={item.cover} alt="" />
                                        </div>
                                        <div className={styles.lefta_Left}>
                                            <div className={styles.lefta_Main_Left_title}>
                                                {item.summary}
                                            </div>
                                            <div className={styles.lefta_Main_Left_icon}>
                                                <span>
                                                    <EyeOutlined /> {item.views}
                                                </span>
                                                <span className={styles.lefta_Main_Left_Sapn}>·</span>
                                                <span>
                                                    <ShareAltOutlined /> {item.likes}
                                                </span>
                                            </div>
                                        </div>


                                    </div>

                                </div>
                                <Divider />
                            </div>
                        );
                    })
                ) : (
                    <div>
                        <Empty />
                    </div>
                )}
            </div>
            <div className={styles.righa}>
                <Upperright />
                <Rightlowerother/>
            </div>
        </div>

    );
}
